import React, { useState } from 'react';
import { Button, Table, Modal } from 'antd';
import ProductForm from './ProductForm';

const ProductManagement = () => {
    const [modalVisible, setModalVisible] = useState(false);
    const [currentProduct, setCurrentProduct] = useState(null);
    const [confirmLoading, setConfirmLoading] = useState(false);

    // 新增/编辑
    const handleAddProduct = () => {
        setCurrentProduct(null); // 清空当前商品信息
        setModalVisible(true);
        
    };

    const handleEditProduct = (product) => {
        setCurrentProduct(product); // 设置当前商品信息
        setModalVisible(true);
        
    };

    const handleModalCancel = () => {
        setModalVisible(false);
    };

    // 删除
    const handleDeleteProduct = (id) => {
        Modal.confirm({
            title: '确认删除',
            content: '是否确认删除该商品？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                // 调用接口删除商品，这里使用setTimeout模拟异步操作
                setConfirmLoading(true);
                setTimeout(() => {
                    console.log('删除商品', id);
                    setConfirmLoading(false);
                }, 1000);
            },
        });
    };

    

    const columns = [
        { title: '商品ID', dataIndex: 'id', key: 'id' },
        { title: '商品图片', dataIndex: 'image', key: 'image', render: (text, record) => <img src={text} alt="product" style={{ maxWidth: '100px' }} /> },
        { title: '商品名称', dataIndex: 'name', key: 'name' },
        { title: '商品价格', dataIndex: 'price', key: 'price' },
        { title: '库存', dataIndex: 'stock', key: 'stock' },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <span>
                    <Button type="link" onClick={() => handleEditProduct(record)}>编辑</Button>
                    <Button type="link" onClick={() => handleDeleteProduct(record.id)}>删除</Button>
                </span>
            ),
        },
    ];


    const datas = [
        { key: '1', id: 1, image: 'https://via.placeholder.com/150', name: '商品A', price: '$100', stock: 50 },
        { key: '2', id: 2, image: 'https://via.placeholder.com/150', name: '商品B', price: '$80', stock: 30 },
    ];
    const [data, setData] = useState(datas);
    const getData= async () => {

        try {
          // 发送POST请求
          const response = await axios.post('https://zz.nongkeyu.com/zzsc/select_product/', {});
          const list = response.res;
          
          if (list.length > 0) {
            setData(list)
          } 
        } catch (error) {
          alert('获取数据失败');
        }
      };

    

    return (
        <div>
            <Button type="primary" style={{ marginBottom: '20px' }} onClick={handleAddProduct}>
                新增商品
            </Button>
            <Table columns={columns} dataSource={data} />
            <Modal
                title={currentProduct ? "编辑商品" : "新增商品"}
                visible={modalVisible}
                onCancel={handleModalCancel}
                footer={null}
                destroyOnClose
            >
                <ProductForm onCancel={handleModalCancel} product={currentProduct} />
            </Modal>
        </div>
    );
};

export default ProductManagement;
